<template>
	<view class="">

		<!-- 	<view class="">
				<u-image mode="widthFix" src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/swiper01.png"></u-image>
			</view>
 -->
			
			<vin @fileList='fileList'></vin>
			<view class="searchBox">
				<view class="searchContext">
					<image src="../../static/VIN.png" mode=""></image>
					<u-input style="width: 100%;padding-left: 30rpx;" v-model="getInfo.vin" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()" :clearable="false" placeholder-style="color: #999;" type="text"
					 placeholder="或者直接输入VIN码" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				<view class="buttons">
					
					<view class="kscx" @click="getzhck">
						开始查询
					</view>
					<view class="ckyl"  @click="goSample">
						查看样例
					</view>
				</view>
				<view class=""  style="margin-top: 40rpx;">
					<u-checkbox-group>
						<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle" @change="uerAgreement">
							<text class="tip">使用本服务意味着您已经阅读并同意</text>
							<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>
						</u-checkbox>
					</u-checkbox-group>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import app from "../../App.vue"
import API from "@/api/report.js"
export default {
	data() {
		return {
			form: {
				checked:true,
				
			},
			getInfo:{
				image:"",
				vin:""
			},
			orderNo:""
		};
	},
	methods:{
		toUppercase(e) {
			this.getInfo.vin = this.getInfo.vin.toUpperCase();
				console.log(this.getInfo.vin)
		},
		vpnGet(e) {
			
			this.getInfo.vin = null;
			
			this.getInfo.vin = e.replace(/[\u4E00-\u9FA5]/g,'')
			
			if (e.length == 17) {
				API.getVin({
					vin: e
				}).then(res => {
					console.log(res)
					if (res.data.isHaveVin) {
						this.carInfoJson = res.data
						this.assessInfo.carModel = res.data.modelName
						this.assessInfo.seriesId = res.data.seriesId
						this.assessInfo.brandId = res.data.brandId
						this.assessInfo.modelId = res.data.modelId
						this.assessInfo.color = res.data.color
		
					}
					else{
		
						this.$u.toast(res.message || '请输入17位车架号');
						this.isHaveVin = false;
						return false
					}
				})
			} else {
				this.$u.toast('请输入17位车架号');
			}
		},
		getOcrInfo(image){
			console.log(image);
			let data = {
				image:image,
			}
			API.getOcrInfo(data).then(res=>{
				console.log(res);
				if(res.code == 200){
					this.getInfo.vin = res.data.vin
				}
				else{
					this.$u.toast('获取VIN码失败');
				}
			})
		},
		uerAgreement(e){
			console.log(e);
			this.form.checked = e.value;
		},
		goUserAgreement(){
			uni.navigateTo({
				url: "/pages/login/userAgreement"
			})
		},
		goSample(){
			uni.navigateTo({
				url:"./carReportDetailSample"
			})
		},
		getzhck(){
			if(!this.getInfo.image){
				this.$u.toast('请先上传行驶证图片');
				return false
			}
			if(!this.getInfo.vin){
				this.$u.toast('请先输入VIN码');
				return false
			}
			//正则表达式
			let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
			let sign_chassis = RegExp(reg_chassis).test(this.getInfo.vin);
			if(this.getInfo.vin && !sign_chassis ){
				this.$u.toast('请输入17位有大写字母和数字组成VIN码');
				return false
			}
			
			
			if(this.form.checked == false){
				this.$u.toast('请阅读并同意用户协议！');
				return false
			}
			console.log(this.getInfo);
			API.getzhck(this.getInfo).then(res=>{
				console.log(res)
				if(res.code==200 && res.data){
					this.orderNo = res.data.orderNo;
					uni.navigateTo({
						url:"./carReportDetail?orderNo=" + this.orderNo
					})
				}
				else if(res.code==401){
					this.$u.toast('登录信息已过期，请重新登录');
					uni.pageScrollTo({
						selector: '/pages/loginBtn/loginBtn'
					})
				}
				else{
					this.$u.toast(res.message);
					return false
				}
				this.ljxd1 = false
				
				setTimeout(res=>{
					that.ljxd1 = true
				},1500)
				var mylist = [];
				for (var i = 0; i < this.lists.length; i++) {
					mylist.push({
						image: this.lists[i].response.data.fileId,
						vin: this.lists[i].response.data.vin
					})
				}
				this.getInfo.imagesAndVins = mylist
				
				if (this.getInfo.imagesAndVins.length==0) {
					this.$u.toast('请先上传行驶证图片');
					return false
				}
				
				if (this.form.checked == false) {
					this.$u.toast('请阅读并同意用户协议！');
					return false
				}
				// this.mutititi = false;
				API.bocheIncidentOrdercreateOrderBatch(this.getInfo).then(res => {
					let that = this;
					//console.log(res)
					if (res.code == 200) {
						that.orderId = res.dataTwo
						// console.log(123)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp, //时间戳
							nonceStr: res.data.nonceStr, //随机字符串
							package: res.data.package, //统一下单接口返回的 prepay_id 参数值
							signType: res.data.signType,
							paySign: res.data.paySign, //签名内容
							success: function(res) {
								// console.log(res)
								uni.showLoading({
									title: '生成中···',
								})
								setTimeout(res=>{
									that.detectionOrder();
									
								},1000)
								// that.$refs.uToast.show({
								// 	title: '付款成功',
								// 	type: 'success',
								// 	callback: function() {
				
								// 		that.detectionOrder();
								// 	}
								// })
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
				
						// console.log(res)
				
						var list = this.lists;
						for (var i = 0; i < list.length; i++) {
							for (var j = 0; j < res.data.length; j++) {
								if (list[i].response.data.fileId == res.data[j].image) {
									list[i].response.data.message = res.data[j].message
								}
							}
						}
						this.lists = list;
						console.log(this.lists)
						this.$forceUpdate()
						// this.$u.toast('识别失败，请重新输入Vin！');
					}
				
				})
			},
			detectionOrder() {
				uni.hideLoading()
				let data = {
					token: this.token,
					orderId: this.orderId
				}
				uni.request({
					url: 'https://www.ibuycar.com.cn/wx/zhck/getBocheIncidentReport',
					data: data,
					method: 'GET',
					success: ((res) => {
						console.log(res)
						uni.hideLoading()
						uni.navigateTo({
							url: '/pagesB/pgddList/pgddList?orderId='+this.orderId
						})
						// if (res.data.code == 200) {
						// 	// resolve(res.data)
						// 	this.$refs.uToast.show({
						// 		title: '报告生成中',
						// 		type: 'success',
						// 		callback: function() {
						// 			uni.navigateTo({
						// 				url: '/pagesB/pgdd/pgdd'
						// 			})
						// 		}
						// 	})
						// } else if (res.data.code == 999) {
						// 	uni.showToast({
						// 		title: "订单不正确",
						// 		icon: "none"
						// 	});
						// } else {
						// 	uni.showToast({
						// 		title: res.url + "订单异常支付金额将24小时内原路退回",
						// 		icon: "none"
						// 	});
						// }
					}),
					fail: ((obj) => {
						uni.hideLoading()
						// uni.showToast({
						// 	title: obj.url + "订单异常支付金额将24小时内原路退回",
						// 	icon: "none"
						// });
					})
				})
			},
			// 切换城市code
			// fileList(fileList) {
			// 	this.getInfo.image = fileList
			// 	console.log("从组建获取的列表")
			// 	console.log(this.getInfo.image)
			// 	this.getOcrInfo(this.getInfo.image)
			// }

			})
		},
		// 切换城市code
		fileList(fileList){
			this.getInfo.image = fileList
			console.log("从组建获取的列表")
			console.log(this.getInfo.image)
			this.getOcrInfo(this.getInfo.image)
		},
		
		}
};
</script>
<style>
page {
background-color: #fff;
}
</style>
<style scoped  lang="scss">
	.buttons{
		view{
			margin-top: 40rpx;
		}
	}
	.searchBox{
		padding:$uni-widthspace;
		.searchContext{
			    // background: #F4F6F5;
			    display: flex;
			    padding: 10rpx 24rpx;
			    border-radius: 15rpx;
				box-sizing: border-box;
				font-size: 40rpx;
				color: #002B56;
				margin-bottom:$uni-widthspace;
				border-bottom: 1px solid #EFEFEF ;
				image{
					width: 42rpx;
					height: 30rpx;
					margin-top: 20rpx;
				}
			}
	}

	.tip{
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	.ckyl{
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #002B56;
		text-align: center;
	}
	.u-size-default{
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx 0;
	}
	.kscx{
		width: 100%;
		background: #002B56;
		border-radius: 8rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
